<template>
  <view class="template-message">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
		<text class="tn-text-lg tn-color-white">消息通知</text>
	</tn-nav-bar>

    <!-- 方式1 start-->
    <view class="tn-flex tn-message-fixed" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="tn-icon-green">
            <view class="tn-icon-eye-fill tn-color-green" style="padding: 9px;font-size: 36px;">
            </view>
          </view>
          <!-- <view
            class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-orange tn-color-white">
            <view class="tn-icon-iot-fill">
              <tn-badge backgroundColor="#E72F8C" fontColor="#FFFFFF" :absolute="true" :fontSize="16">
                <text>16</text>
              </tn-badge>
            </view>
          </view> -->
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis tn-color-white">关注</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="tn-icon-red">
            <view class="tn-icon-like-fill tn-color-red" style="padding: 9px;font-size: 36px;">
            </view>
          </view>
          <!-- <view
            class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">

            <view class="tn-icon-like-fill">
              <tn-badge backgroundColor="#E72F8C" fontColor="#FFFFFF" :absolute="true" :fontSize="16">
                <text>12</text>
              </tn-badge>
            </view>
          </view> -->
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis tn-color-white">爱心</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="tn-icon-org">
            <view class="tn-icon-my-fill tn-color-orange" style="padding: 9px;font-size: 36px;">
            </view>
          </view>
          <!-- <view class="tn-icon-orange">
            <view class="tn-icon-my-fill tn-color-orange" style="padding: 7px;font-size: 40px;">
            </view>
          </view> -->
          <!-- <view
            class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-cyan tn-color-white">
            <view class="tn-icon-praise-fill">
              <tn-badge backgroundColor="#E72F8C" fontColor="#FFFFFF" :absolute="true" :fontSize="16">
                <text>39</text>
              </tn-badge>
            </view>
          </view> -->
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis tn-color-white">点赞</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="tn-icon-blue">
            <view class="tn-icon-notice-fill tn-color-blue" style="padding: 9px;font-size: 36px;">
            </view>
          </view>
          <!-- <view
            class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
            <view class="tn-icon-notice-fill">
              <tn-badge backgroundColor="#E72F8C" fontColor="#FFFFFF" :absolute="true" :fontSize="16">
                <text>99+</text>
              </tn-badge>
            </view>
          </view> -->
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis tn-color-white">系统</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 方式1 end-->

    <tn-modal v-model="show1" :custom="true">
      <view class="custom-modal-content">
        <view class="tn-text-center tn-padding-top-sm tn-text-xxl tn-text-bold">提 示</view>
        <view class="tn-text-center tn-padding-top tn-text-lg tn-color-gray">确定将所有消息标为已读吗？</view>
        <view class="tn-flex tn-flex-row-between tn-margin-top-xl">
          <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
            <tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="90%" shadow fontBold shape="round">
              <text class="tn-color-black">取 消</text>
            </tn-button>
          </view>
          <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
            <tn-button backgroundColor="#FFF00D" padding="40rpx 0" width="90%" shadow fontBold shape="round">
              <text class="tn-color-black">确 定</text>
            </tn-button>
          </view>
        </view>
      </view>
    </tn-modal>

    <view class="tn-safe-area-inset-bottom tn-margin-bottom-sm" style="margin-top: 200rpx;"
      :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
      <tn-swipe-action>
        <tn-swipe-action-item v-for="(item, index) in msgData" :key="index" :name="index" :options="options">
          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" style="background-color: #1c1d21;" @click="tn('/activityPages/map?zsid='+item.zsInfo.zsid+'&userid='+userInfo.userid)">
            <view class="justify-content-item tn-color-black">
              <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                <view class="logo-pic">
                  <view class="logo-image">
                    <view class="tn-shadow-blur"
                      :style="'background-image:url('+ item.zsInfo.imgurl + ');width: 110rpx;height: 110rpx;background-size: cover;'">
                    </view>
                  </view>
                </view>
                <view class="tn-padding-right tn-color-black tn-bage-num">
                  <!-- <view class="tn-bage">
                    <tn-badge backgroundColor="tn-cool-bg-color-1" fontColor="tn-color-white" :radius="40"
                      margin="10rpx 0rpx 10rpx 10rpx"><text>6</text></tn-badge>

                  </view> -->
                  <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold tn-color-white"
                    style="font-size: 29rpx;">
                    {{item.zsInfo.title}}

                  </view>
                  <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm">
                    <text class="tn-time">{{item.prompt}}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="justify-content-item">
              <view class="tn-flex tn-flex-row-right">
                <view class="tn-time">{{item.createtime}}</view>
                <!-- <view class="tn-flex tn-flex-row-right">
                  <tn-badge backgroundColor="tn-cool-bg-color-1" fontColor="tn-color-white" :radius="40"
                    margin="10rpx 0rpx 10rpx 10rpx"><text>6</text></tn-badge>
                </view> -->
              </view>

            </view>
          </view>
        </tn-swipe-action-item>
      </tn-swipe-action>
    </view>

  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
  name: 'TemplateMessage',
  mixins: [template_page_mixin],
  data() {
    return {
      show1: false,
      options: [{
        icon: 'star',
        style: {
          backgroundColor: '#FFA726',
          width: '80rpx',
          height: '80rpx',
          margin: '0 12rpx',
          borderRadius: '100rpx'
        }
      },
      {
        icon: 'delete',
        style: {
          backgroundColor: '#E83A30',
          width: '80rpx',
          height: '80rpx',
          margin: '0 12rpx',
          borderRadius: '100rpx'
        }
      }
      ],
	  msgData: null,
	  loginToken: uni.getStorageSync('loginToken') || '',
	  userInfo: uni.getStorageSync('userInfo') || null,
    }
  },
  created() {
	  console.log(this.userInfo);
	  this.islogin();
	  this.getData();
  },
  onLoad() {
	  console.log(this.userInfo);
	  this.islogin();
	  this.getData();
  },
  onShow() {
	  console.log(this.userInfo);
  	  this.islogin();
	  this.getData();
  },
  methods: {
	islogin () {
	    if (this.loginToken == '') {
	    	uni.navigateTo({
	    		url: '/minePages/login'
	    	})
	    }
	},
    // 弹出模态框
    showModal(event) {
      this.openModal()
    },
    // 打开模态框
    openModal() {
      this.show1 = true
    },
	// 跳转
	tn(e) {
	  uni.navigateTo({
	    url: e,
	  });
	},
	getData() {
	  let formData = {
	    userid: this.userInfo.userid
	  };
	  this.$Request.getApi("/module.php?m=aichat_bchat&a=my&ajax=1&catid=0", formData).then((res) => {
	    console.log(res.data.list);
		if (res.error == 0) {
			this.msgData = res.data.list
			let resD = res.data.list;
			// this.timbreName = res.data.list;
			this.msgData.forEach((timbre, index) => {
				if (timbre.prompt.length > 10) {
					this.msgData[index].prompt = timbre.prompt.substring(0, 10);
					// 这里可以添加提示信息，告诉用户已达到字数限制
				}
			});
		} else {
			uni.showModal({
				showCancel: false,
				title: '获取数据失败',
				content: res.message,
			});
		}
	  });
	},
  }
}
</script>

<style lang="scss" scoped>
.template-message {}

.tn-message-fixed {
  position: fixed;
  background-color: #1c1d21;
  box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
  top: 0;
  width: 100%;
  transition: all 0.25s ease-out;
  z-index: 100;
}

/* 图标容器1 start */
.icon1 {
  &__item {
    width: 30%;
    background-color: #1c1d21;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 90rpx;
      height: 90rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
      }
    }
  }
}


/* 用户头像 start */
.logo-image {
  width: 114rpx;
  height: 114rpx;
  position: relative;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  overflow: hidden;
  // background-color: #FFFFFF;
}

.tn-icon-green {
  width: 115rpx;
  height: 112rpx;
  border-radius: 28rpx;
  background-color: #212e2d;
  margin-bottom: 20rpx;
}

.tn-color-green {
  color: #3baa4a !important;
}

.tn-icon-red {
  width: 115rpx;
  height: 112rpx;
  border-radius: 28rpx;
  background-color: #2f232a;
  margin-bottom: 20rpx;
}

.tn-color-red {
  color: #d7382f !important;
}

.tn-icon-org {
  width: 115rpx;
  height: 112rpx;
  border-radius: 28rpx;
  background-color: #3a2c24;
  margin-bottom: 20rpx;
}

.tn-icon-blue {
  width: 115rpx;
  height: 112rpx;
  border-radius: 28rpx;
  background-color: #163b4a;
  margin-bottom: 20rpx;
}

.tn-color-blue {
  color: #338dc7 !important;
}

.tn-time {
  color: #646465;
  font-size: 24rpx;
}

.tn-bage-num {
  position: relative;

  .tn-bage {
    position: absolute;
    left: 10rpx;
    top: -20rpx;
  }
}
</style>
